<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>rendeer.js: cube mesh example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type='text/css'>
		html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #AAA; }
		div { display: inline-block; margin: 10px; background-color: #333; box-shadow: 2px 2px 2px black; }
	</style>
	<script type="text/javascript" src="../external/gl-matrix-min.js"></script>
	<script type="text/javascript" src="../external/litegl.js"></script>
	<script type="text/javascript" src="../build/rendeer.js"></script>
	<script type="text/javascript">
	
	function init()
	{
		//create a scene
		var scene = new RD.Scene();

		//create the rendering context
		var context = GL.create({canvas: document.getElementById("canvas_one") });
		var renderer = new RD.Renderer(context);

		var context2 = GL.create({canvas: document.getElementById("canvas_two") });
		var renderer2 = new RD.Renderer(context2);

		context.makeCurrent();

		//create camera
		var camera = new RD.Camera();
		camera.perspective( 45, gl.canvas.width / gl.canvas.height, 1, 1000 );
		camera.lookAt( [0,200,300],[0,100,0],[0,1,0] );

		//create a node
		var node = new RD.SceneNode();
		node.color = [1,0,0,1];
		node.mesh = "data/man.obj";
		//node.scale([50,50,50]);
		node.shader = "phong";
		//inner update
		node.update = function(dt) { 
			this.rotate(dt,RD.UP);
			this.color[0] = 1.0;
			this.color[1] = Math.sin( getTime() * 0.001 );
			this.color[2] = 1.0 - this.color[1];
		}
		scene.root.addChild(node);

		//particles
		var particles = new RD.ParticlesEmissor();
		particles.particles_size = 1000;
		particles.particles_acceleration[1] = 100;
		particles.color = [0.5,0.5,0.5,1];
		particles.velocity_variation = 50;
		scene.root.addChild(particles);

		//global settings
		var bg_color = vec4.fromValues(0.2,0.3,0.4,1);
		var bg_color2 = vec4.fromValues(0.4,0.3,0.2,1);

		//main render loop
		var last = now = getTime();
		requestAnimationFrame(animate);
		function animate() {
			requestAnimationFrame( animate );

			last = now;
			now = getTime();
			var dt = (now - last) * 0.001;
			renderer.clear(bg_color);
			renderer.render(scene, camera);

			renderer2.clear(bg_color2);
			renderer2.render(scene, camera);

			scene.update(dt);
		}
	}


	</script>
</head>
<body>
<div id="one">
	<canvas id="canvas_one" width="500" height="500"></canvas>
</div>
<div id="two">
	<canvas id="canvas_two" width="500" height="500"></canvas>
</div>

<script>init();</script>
</body>
</html>


